<template>
	<body-wrap isFlex>
		<view class="formBox" v-if="orderInfo">
			<view class="formItemBox">
				<view class="title">专家信息</view>
				<view class="fmipbox txt">
					{{orderInfo.product.teacherId.name || orderInfo.product.teacherId.nickname}} 
					{{orderInfo.product.teacherId.industry}}
					（{{orderInfo.product.teacherId.phone}}）
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">预约时间</view>
				<view class="fmipbox txt">
					{{orderInfo.zxTime}}
				</view>
			</view>
			<view class="formItemBox" v-if="orderInfo.product.type == 2">
				<view class="title">地址</view>
				<view class="fmipbox txt">
					{{orderInfo.product.address}}
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">咨询问题描述</view>
				<view class="fmipbox fmipbox2">
					<textarea class="myTextarea" v-model="question_describe" placeholder="请输入咨询问题描述" />
				</view>
			</view>
			<!-- <view class="formItemBox">
				<view class="title">上传附件</view>
				<view class="fileListBox"><unload-file ref="uplfileEle" @success="getAnnex" /></view>
			</view> -->
		</view>
		<template #footer>
			<view class="footer-btn-box">
				<view class="myBtn" @click="doOrder">确定</view>
			</view>
		</template>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import unloadFile from "@/components/unloadFile/index.vue"
	//import {getConsultList} from "@/api/consult.js"
	import {toast} from '@/utils/common.js'
	export default defineComponent({
		components:{
			bodyWrap,
			unloadFile
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
				orderInfo:computed(()=>store.state.base.orderInfo),
				question_describe:'',
				annexs:'' // 附件
				
			})
			
			onMounted(()=>{
				console.log("orderInfo:",state.orderInfo)
			})
			
			const getAnnex =(fileList)=> {
				//state.annexs = fileList
				
				store.commit('base/set_orderInfo',{
					additionals:{
						question_describe:state.question_describe,
						annex:fileList || ''
					}
				})
				uni.navigateTo({
				 	url:'/pages/order/order'
				})
			}
			
			const doOrder = ()=>{
				if(!state.question_describe){
					return toast('请输入问题描述')
				}
				//proxy.$refs.uplfileEle.doUploadFile()
				getAnnex()
			}
			
			return {
				...toRefs(state),
				getAnnex,
				doOrder
			}
		}
	})
</script>

<style lang="scss" scoped>
	.formBox{
		padding: 20rpx;
	}
	.formItemBox{
		margin: 20rpx 0 0 0;
		.title{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			height: 70rpx;
			&:before{
				content: '';
				display: block;
				width: 7rpx;
				height: 30rpx;
				background: #e3af2f;
				margin: 0 10rpx 0 0;
			}
		}
		.fmipbox{
			box-sizing: border-box;
			border: 1px solid #e5e5e5;
			border-radius: 5px;
			height: 70rpx;
			padding: 0 15rpx;
			background: #fff;
			&.txt{
				display: flex;
				border: 0;
				align-items: center;
			}
			&.fmipbox2{
				height: auto;
			}
			&.fmipbox3{
				height: auto;
				border: none;
			}
			.myInput{
				width: 100%;
				height: 100%;
			}
			.myTextarea{
				width: 100%;
				height: 250rpx;
				padding: 15rpx;
			}
			.itemrbbox{
				display: flex;
				&+.itemrbbox{
					margin-top: 20rpx;
				}
				.fmtips{
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
</style>
